yPage

Description

The yPage is a container element to organize and hold elements.

Some use-cases for the yPage are:

• Theming
• Conditional Loading
• Fetching Data from an API

Basic Structure

The basic structure of the yPage shall be explained in the following. For the general structure of a yComponent please visit the YBase-components basic-structure.

Properties

Through its various properties the yPage can be configured to suit your needs. The display below provides you with an overview of all the yPage properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-page__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-page__component-type

The type of the component. For this component it is -page.

Name: name

String Property

--y-page__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-page__version

The custom version of the Page-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-page__core-theme

The CoreTheme, which will be apllied to the Page. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-page__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Page. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-page__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-page__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-page__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-page__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-page__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-page__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-page__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-page__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-page__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-page__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-page__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-page__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-page__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-page__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-page__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-page__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-page__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-page__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-page__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-page__bg-color

--y-page__bg-color__normal

--y-page__bg-color__hover

The color of the background. This can be set as a color from a palette or a custom hex color.

Name: bgUrl

String Property

--y-page__bg-url

The url to the source of the file to be set as the background. This can be set to a text containing a valid url path. The path should not be to your local files (starting with e.g. C:/...), but instead to the web (starting with e.g. https://www....).

Name: bgSize

String Property

--y-page__bg-size

The size of the background inside of the Page-component. This can be set to:

• auto
• cover
• contain

Name: bgPosition

String Property

--y-page__bg-position

The position of the background inside of the Page-component. This can be set to:

• none
• center
• left
• right
• top
• bottom
• inherit

Name: bgRepeat

String Property

--y-page__bg-repeat

This property specifies if the background should be repeated.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-page__border-top-color

--y-page__border-top-color__normal

--y-page__border-top-color__hover

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-page__border-top-style

--y-page__border-top-style__normal

--y-page__border-top-style__hover

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-page__border-top-width

--y-page__border-top-width__normal

--y-page__border-top-width__hover

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-page__border-right-color

--y-page__border-right-color__normal

--y-page__border-right-color__hover

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-page__border-right-style

--y-page__border-right-style__normal

--y-page__border-right-style__hover

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-page__border-right-width

--y-page__border-right-width__normal

--y-page__border-right-width__hover

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-page__border-bottom-color

--y-page__border-bottom-color__normal

--y-page__border-bottom-color__hover

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-page__border-bottom-style

--y-page__border-bottom-style__normal

--y-page__border-bottom-style__hover

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-page__border-bottom-width

--y-page__border-bottom-width__normal

--y-page__border-bottom-width__hover

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-page__border-left-color

--y-page__border-left-color__normal

--y-page__border-left-color__hover

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-page__border-left-style

--y-page__border-left-style__normal

--y-page__border-left-style__hover

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-page__border-left-width

--y-page__border-left-width__normal

--y-page__border-left-width__hover

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-page__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-page__box-shadow

--y-page__box-shadow__normal

--y-page__box-shadow__hover

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-page__opacity

--y-page__opacity__normal

--y-page__opacity__hover

The opacity of all colored parts of the component. This value is set in percent.

ALIGNMENTread more

Name: flexWrap

Boolean Property

--y-page__flex-wrap

This property specifies whether the flexible items in the Page-component should wrap or not.

Name: flexDirection

String Property

--y-page__flex-direction

The direction in which the flexible items inside the Page-component should align.

Name: justifyContent

String Property

--y-page__justify-content

The justification of the flexible Page-container's items when the items do not use all available space on the the main-axis (horizontally).

Name: alignItems

String Property

--y-page__align-items

The default alignment for items inside the flexible Page-container.

Name: justifyItems

String Property

--y-page__justify-items

The justification of the flexible Page-container's items when the items do not use all available space on the main-axis (vertically).

Name: alignContent

String Property

--y-page__align-content

The default alignment for content inside the flexible Page-container.

Name: overflowX

String Property

--y-page__overflow-x

This property specifies the behavior, when content inside the Page-component is wider than its parent(vertically). This can be set to:

• visible
• hidden
• scroll
• auto

Name: overflowY

String Property

--y-page__overflow-y

This property specifies the behavior, when content inside the Page-component is higher than its parent(horizontally). This can be set to:

• visible
• hidden
• scroll
• auto

Name: showScrollbar

Boolean Property

--y-page__show-scrollbar

This property specifies, whether the scrollbar should be displayed or not, while keeping scrollability.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-page__-evt-init

This specifies the function to be called, when the Page is initialized.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yPage in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Background

Cover

Repeat

Cover

stylearrow_forward_iosbackgroundarrow_forward_iosbg-imagehttps://i.ibb.co/rF9Bf93/cat-8198720-640.jpg

stylearrow_forward_iosbackgroundarrow_forward_iosbg-sizecover

Repeat

stylearrow_forward_iosbackgroundarrow_forward_iosbg-imagehttps://i.ibb.co/rF9Bf93/cat-8198720-640.jpg

stylearrow_forward_iosbackgroundarrow_forward_iosbg-sizecontain

stylearrow_forward_iosbackgroundarrow_forward_iosbg-repeatrepeat

Alignment

This section shows the visualization of example related to the flexbox system.

Row

Column

Wrap

Row

stylearrow_forward_iosalignmentarrow_forward_iosflex-directionrow

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

Column

stylearrow_forward_iosalignmentarrow_forward_iosflex-directioncolumn

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

stylearrow_forward_iosalignmentarrow_forward_iosalign-itemscenter

Wrap

stylearrow_forward_iosalignmentarrow_forward_iosflex-directionrow

stylearrow_forward_iosalignmentarrow_forward_iosjustify-contentcenter

stylearrow_forward_iosalignmentarrow_forward_iosalign-itemsflex-start

stylearrow_forward_iosalignmentarrow_forward_iosflex-wrapwrap

Info: Scroll behavior

If the content exceeds the parent element itself, a scrollbar will appear. When needed, this scrollbar can be removed while keeping scrollability, when toggling the property show-scrollbar to false.

Theming

How to:

You can use yPage to dynamically theme the content inside—for example, by switching styles based on a value stored in a Clipboard.

info

This example requires two different SubThemes to exist inside your CoreTheme.

1. Add a yToggle.
2. Navigate to Clipboards and create a new Clipboard.
3. Add a new data property, change its value type to boolean, and name it useDarkTheme.
4. Create a SourceLink and connect it to the yToggle, resulting in a SourceLink like: y-page:1:y-toggle:2:value.
5. Go back to the Ui Designer and select the page.
6. Open Events in the Detail Panel and edit EvtInit.
7. Insert the code snippet below and save your changes.

Code example:

In this example, the active theme is chosen by reading a boolean property from a Clipboard.

EvtInit

// function onPage_1_EvtInit (apiObject, component, eventData) {

const useDarkTheme = await apiObject.Clipboards.propertyRead(0, "useDarkTheme");

if (useDarkTheme) {
  component.set("generic", "meta", "SubTheme", "[insert subtheme name here]");
} else {
  component.set("generic", "meta", "SubTheme", "[insert subtheme name here]");
}

// }

Conditional Loading

How to:

You can use the yPage to change the appearance of subComponents, based on a state.

1. Add two yImage components and configure them as you wish.
2. Select the current page again.
3. Navigate to Events inside the Detail Panel and modify EvtInit.
4. Insert the code snippet down below.

Code example:

In this example, the appearance of an image is adjusted based on the role of the currently logged-in user. When you start the project in Preview, the yImage with ID 2 is shown; in production runtime, the yImage with ID 1 is displayed instead.

EvtInit

// function onPage_1_EvtInit (apiObject, component, eventData) {

if (apiObject.user.roleId === "2") {
  // may see the image with all developers
  const image = apiObject.ui.getObject(2, "y-image", "y-page", 1);

  image.set("style", "opacity", "opacity__normal", 1.0);
} else {
  // can just see the image with customers
  const image = apiObject.ui.getObject(3, "y-image", "y-page", 1);

  image.set("style", "opacity", "opacity__normal", 1.0);
}

// }

Fetching Data from an API

How to:

You can use yPage to fetch data from an API and process it.

1. Create a new ySelectionPicker and style it as needed.
2. Select your page again.
3. Go to Events in the Detail Panel and edit EvtInit.
4. Insert the code snippet below to fetch all available country codes and load them into the ySelectionPicker as an OptionListValue[].

Code example:

In this example, the user fetches data from the REST Countries API and uses it to build a list of country codes.

EvtInit

// async function onPage_1_EvtInit (apiObject, component, eventData) {

// Define the URL of the API that returns country codes
const apiUrl = "https://restcountries.com/v3.1/all";

try {
  // Fetch data from the API
  const response = await fetch(apiUrl);

  // Check if the response is ok (status code 200-299)
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }

  // Parse the JSON data from the response
  const data = await response.json();

  // Extract the country codes from the data
  const countryCodes = data.map(
    (country) =>
      new apiObject.types.optionListValue(country.cca2, country.name.common)
  );

  const listPicker = apiObject.ui.getObject(
    4,
    "y-selection-picker",
    "y-page",
    1
  );

  listPicker.set("style", "list", "optionList", countryCodes);
} catch (error) {
  // Log any errors that occur during the fetch
  console.error("Error fetching country codes:", error);
}

// }